<template>
  <div class="container">
    <div class="userInfo" v-if="showPersonInfo">
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="个人信息">
          <PersonInfo/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="修改信息" force-render>
          <EditPersonalInfo/>
        </a-tab-pane>
<!--        <a-tab-pane key="3" tab="Tab 3">-->
<!--          Content of Tab Pane 3-->
<!--        </a-tab-pane>-->
      </a-tabs>
    </div>


  </div>
</template>
<script>
import {mapState} from "vuex";
import PersonInfo from "@/components/PersonInfo";
import EditPersonalInfo from "@/components/EditPersonalInfo";


export default {
  components:{
    PersonInfo,
    EditPersonalInfo,
  },
  props: {
    showPersonInfo: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },


  mounted() {

  },
  methods: {
    callback(key) {
      console.log(key);
    },
  },
  computed: {
    ...mapState(['token'])

  },
  watch: {},
  data() {
    return {
      // infoShow: true,

    }
  }
}
</script>
<style scoped>

</style>